<template>
  <div class="reg-main">
    <div class="reg-head">
      <div class="row video-main">
        <div class="col-lg-12 col-md-12">
          <video width="100%" class="head-video" src="http://cd.ray-live.cn/video/goddess-moon.mp4" poster="" autoplay="" loop=""
                 muted=""></video>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-lg-12 col-md-12">
          <div class="register-form">
            <h2>邮箱验证成功,修改密码</h2>
            <form id="reg-form" class="needs-validation" novalidate ref="form">
              <div class="form-group">
                <input type="password" class="form-control" placeholder="请输入新密码" v-model="password1">
              </div>
              <div class="form-group">
                <input type="password" class="form-control" placeholder="确认密码" v-model="password2">
                <div class="invalid-feedback">密码不能为空</div>
              </div>
              <button type="button" class="default-btn" @click="updatePassword">修改密码</button>
            </form>
          </div>
        </div>
      </div>
    </div>

    <div class="row reg-logo">
      <div class="col-lg-12 col-md-12">
        <img src="@/assets/images/login_logo.png" alt="image">
      </div>
    </div>
  </div>
</template>
<script setup>
import {ref, reactive, onMounted} from "vue";
import { useRoute } from 'vue-router';
import axios from '@/plugins/axios.js'
const route = useRoute();
let password1=ref("")
let password2=ref("")
const token = ref(route.query.token);
let updatePassword=()=>{
    if (password1.value !== password2.value){
      alert("确认密码和密码不同")
    }else {
      axios.post("login/update/password",{"token":token.value,"password":password1.value}).then(result=>{
        console.log(result)
      })
    }
}
onMounted(() => {
});
</script>

<style scoped>
  .reg-head {
    height: 480px;
    display: flex;
    justify-content: center;
    position: absolute;
    width: 99.3%;
    top: 0px;
    left: 0px;
    z-index: -1;
  }

  .login-head video {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%; /* 保证视频宽度至少为 100% */
    min-height: 100%; /* 保证视频高度至少为 100% */
    width: auto;
    height: auto;
    z-index: -100;
    object-fit: cover;
  }
  .reg-main{
    height: 100%;
    width: 99.9%;
    max-width: 1920px;
    min-height: 99vh;
    min-width: 1320px;
    max-height: 100%;
    position: absolute;
    z-index: -2;
    scrollbar-width: none;
    overflow: hidden;
  }
  .register-form {
    background: rgba(255, 255, 255, 0.5);
  }

  .container {
    right: 50px;
    top: 50px;
    position: absolute;
    width: 660px;
  }

  .reg-logo {
    position: absolute;
    left: 100px;
    top: 0px
  }
</style>